<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">生产异常</block>
		</cu-custom>
		<uni-section title="基本用法" type="line">
			<view class="example">
				<uni-forms ref="baseForm" :model="baseFormData" :rules="rules" labelWidth="80px">
					<uni-forms-item label="异常单号" required name="abnormalNumber">
						<uni-easyinput :disabled="true" v-model="baseFormData.abnormalNumber" placeholder="请输入异常单号" />
					</uni-forms-item>
					<uni-forms-item label="日期" required name="samplingDate">
						<uni-datetime-picker type="datetime" return-type="timestamp"
							v-model="baseFormData.samplingDate" />
					</uni-forms-item>
<!-- 					<uni-forms-item label="责任单位" required name="departId">
						<uni-data-select v-model="baseFormData.departId" :localdata="deptList">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="工序" required name="processId">
						<uni-data-select v-model="baseFormData.processId" :localdata="processList">
						</uni-data-select>
					</uni-forms-item> -->
					<uni-forms-item label="客户料号"  name="custCode">
						<uni-easyinput :disabled="true"   v-model="baseFormData.custCode"
							placeholder="请输入客户料号" />
					</uni-forms-item>
					<uni-forms-item label="出货数量"  name="productionQty">
						<uni-easyinput type="number" :disabled="true" v-model="baseFormData.productionQty" placeholder="请输入出货数量" />
					</uni-forms-item>
<!-- 					<uni-forms-item label="抽检数量" required name="samplingQuantity">
						<uni-easyinput type="number"  v-model="baseFormData.samplingQuantity"  placeholder="请输入抽检数量" />
					</uni-forms-item> -->
					
					<uni-forms-item label="不良数量" required name="defectiveQuantity">
						<uni-easyinput type="number" :focus="focusState" @blur="focusState=false" v-model="baseFormData.defectiveQuantity"  placeholder="请输入不良数量" />
					</uni-forms-item>
					<uni-forms-item label="异常描述" required name="abnormalDescription">
						<uni-easyinput type="textarea"  v-model="baseFormData.abnormalDescription"
							placeholder="请输入异常描述" />
					</uni-forms-item>
<!-- 					<uni-forms-item label="工单号">
						<uni-easyinput v-model="baseFormData.workOrderNumber" placeholder="请输入工单号" />
					</uni-forms-item> -->
					<uni-forms-item label="产品名称">
						<uni-easyinput :disabled="true" v-model="baseFormData.name" placeholder="请输入产品名称" />
					</uni-forms-item>
					<uni-forms-item label="产品编码">
						<uni-easyinput :disabled="true" v-model="baseFormData.code" placeholder="请输入产品编码" />
					</uni-forms-item>
					<uni-forms-item label="图号">
						<uni-easyinput :disabled="true" v-model="baseFormData.drawingNo" placeholder="请输入图号" />
					</uni-forms-item>
					<uni-forms-item label="描述">
						<uni-easyinput :disabled="true" v-model="baseFormData.description" placeholder="请输入描述" />
					</uni-forms-item>
					<uni-forms-item label="版本">
						<uni-easyinput :disabled="true" v-model="baseFormData.productVer" placeholder="请输入版本" />
					</uni-forms-item>
					<uni-forms-item label="单位">
						<uni-easyinput :disabled="true" v-model="baseFormData.unitId_dictText" placeholder="请输入单位" />
					</uni-forms-item>
					<view class="cu-form-group">
						<view class="title">不良图片</view>
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
								:data-url="imgList[index]">
								<image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red radius" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
					<view class="cu-form-group container-btn">
						<button class="cu-btn bg-blue lg" @click="submit">确定</button>
					</view>
				</uni-forms>
			</view>
			<view class="example-body">
				<drawer :show="drawerShow" @cancel="cancel" @ensure="ensure">
					<view style="margin-top: 80px;">
					<view class="cu-form-group">
						<view class="title">查询:</view>
						<input ref="searchVal" :focus="focusStateProduct" @blur="focusStateProduct=false" class="input-class" placeholder="输入查询" v-model="searchVal"
							@input="changeSearchVal"></input>
					</view>
					<view style="overflow-x: auto;">
						<uni-table ref="productTable" :loading="loading" border stripe type="selection"
							emptyText="暂无更多数据" @selection-change="selectionChangeProduct">
							<uni-tr>
								<uni-th width="150" align="center">客户料号</uni-th>
								<uni-th width="150" align="center">名称</uni-th>
								<uni-th width="150" align="center">产品代码</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in productList" :key="index">
								<uni-td>{{ item.custCode }}</uni-td>
								<uni-td>{{ item.name }}</uni-td>
								<uni-td>{{ item.code }}</uni-td>
							</uni-tr>
						</uni-table>
						<view class="uni-pagination-box">
							<uni-pagination show-icon :page-size="productPageSize" :current="productPageCurrent"
								:total="productTotal" @change="changeProductPage" />
						</view>
					</view>
					</view>
				</drawer>
			</view>
			<view style="margin-top: 10px;">
				<uni-table ref="abnTable" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
					@selection-change="abnSelectionData">
					<uni-tr>
						<uni-th width="20" align="center">序号</uni-th>
						<uni-th width="200" align="center">异常单号</uni-th>
						<uni-th width="150" align="center">责任部门</uni-th>
						<uni-th align="center">工序</uni-th>
						<uni-th align="center">异常描述</uni-th>
						<uni-th width="120" align="center">不良图片</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in abn.dataSource" :key="index">
						<uni-td align="center">{{ index + 1 }}</uni-td>
						<uni-td align="center">{{ item.abnormalNumber }}</uni-td>
						<uni-td align="center">
							<view class="name">{{ item.departId_dictText }}</view>
						</uni-td>
						<uni-td align="center">{{ item.processId_dictText }}</uni-td>
						<uni-td align="center">
							<view @click="openPop(item.abnormalDescription)" class="name">{{ item.abnormalDescription ? item.abnormalDescription: ""}}</view>
						</uni-td>
						<uni-td>
							<view>
								<image
								  class="image"
								  :src="getImage(item)"
								  @click="previewImage($event,item,index)"							  
								></image>
							  </view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box">
					<uni-pagination show-icon :page-size="abnPageSize" :current="abnPageCurrent" :total="abnTotal"
						@change="abnChangePage" />
				</view>
			</view>
			<view class="uni-padding-wrap">
				<uni-popup ref="popup" type="center">
				  <view class="contentPop">
						{{popupMessages}}		 
				  </view>
				</uni-popup>
			</view>
		</uni-section>
	</view>
</template>
<script>
	import {
		ACCESS_TOKEN,
		SASS_TENANT_ID,
		SASS_DOMAIN_ID
	} from '@/common/util/constants.js'
	import configService from '@/common/service/config.service.js';
	import MySelect from '@/components/my-componets/my-select.vue'
	import DictMixin from '@/common/mixin/DictMixin.js'
	import api from '@/api/api.js'
import { forEach } from '../../common/luch-request/utils';
	export default {
		name: "custInputProduceAbn",
		mixins: [DictMixin],
		data() {
			return {
				popupMessages:'',
				processList: [],
				deptList: [],
				imgList: [],
				uploadImgList: [],
				uploadUrl: "/sys/common/upload",
				drawerShow: false,
				loading: false,
				abnPageSize: 10,
				abnPageCurrent: 1,
				abnTotal: 0,
				productList:[],
				productPageSize:10,
				productPageCurrent:1,
				productTotal:0,
				searchVal : '',
				focusState:false,
				focusStateProduct:false,
				abn: {
					dataSource: [],
					pageSize: 10,
					pageCurrent: 1,
					total: 0
				},
				abnTableData: [],
				baseFormData: {
					abnormalNumber: '',
					samplingDate: new Date(),
					departId: null,
					processId: null,
					custCode: '',
					productionQty: '',
					samplingQuantity: '',
					defectiveQuantity: '',
					abnormalDescription: '',
					name: '',
					code: '',
					drawingNo: '',
					description: '',
					productVer: '',
					unitId_dictText: '',
					avatar: '',
					biz: '',
					productId:'',
					workOrderNumber:'',
					workOrderQty:0,
					attachment:'',
					salseOrderNumber:'',
					customerId:'',
					salseOrderItemId:'',					
				},
				// 城市数据
				cityData: [{
					text: "北京",
					value: "10001",
				}, {
					text: "上海",
					value: "10002",
				}, {
					text: "深圳",
					value: "10004",
				}],
				skillsRange: [{
						value: 0,
						text: "编程"
					},
					{
						value: 1,
						text: "绘画"
					},
					{
						value: 2,
						text: "运动"
					},
				],

				// 表单数据
				formData: {
					name: 'LiMing',
					email: 'dcloud@email.com'
				},
				rules: {
					// 对name字段进行必填验证
					// departId: {
					// 	rules: [{
					// 			required: true,
					// 			errorMessage: '请输入部门',
					// 		},
					// 	]
					// },
					// // 对email字段进行必填验证
					// processId: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请输入工序',
					// 	}]
					// },
					// 对name字段进行必填验证
					abnormalDescription: {
						rules: [{
								required: true,
								errorMessage: '请输入异常描述',
							},
						]
						},
					custCode: {
						rules: [{
								required: true,
								errorMessage: '请输入客户料号',
							},
						]
					},
					// 对email字段进行必填验证
					abnormalNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入异常单号',
						}]
					},
					// 对name字段进行必填验证
					productionQty: {
						rules: [{
								required: true,
								errorMessage: '请输入出货数量',
							},
						]
					},
					// 对email字段进行必填验证
					// samplingQuantity: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请输入抽检数量',
					// 	}]
					// },
					defectiveQuantity: {
						rules: [{
							required: true,
							errorMessage: '请输入异常数量',
						}]
					},	
					samplingDate: {
						rules: [{
							required: true,
							errorMessage: '请输入异常日期',
						}]
					},	
				},
				customNumberConfig: {
					ruleField: 'abnormalNumber',
					ruleCode: 'customer_complaints_code', //pom_delivery_note_no
					ruleName: '客诉异常单号码',
					ruleUrl: '/sys/fillRule/executeRuleByCode/',
				},
				url: {
					productlist :'/bas/basProduct/list',
					abnlist: "/abn/abnCustomerComplaints/list",
					add: '/abn/abnCustomerComplaints/add',
					edit: '/abn/abnCustomerComplaints/edit',
					queryById: '/abn/abnCustomerComplaints/queryById',
				},
				queryAbnParams:{},
				optionsData : '',
			}
		},
		watch: {
			focusStateProduct(newval) {
				if (this.drawerShow) {
				 this.setFocusProduct()
				}
			},
			// focusState(newval) {
			// 	this.setFocus()
			// },
		},
		mounted() {
			this.biz = 'temp/' + uni.getStorageSync(SASS_TENANT_ID)
			this.baseFormData.departId = uni.getStorageSync('ABN_PRODUCE_SELECT_DEPARTMENT_ID')
			this.baseFormData.processId = uni.getStorageSync('ABN_PRODUCE_SELECT_PROCESS_ID')
			this.getCustomNumber()
			this.initSelectOptions()
			// this.loadAbnData(1)
			this.loadProductData(1)
		},
		onLoad(options) {
			 this.optionsData = JSON.stringify(options);
			 if (options.data) {
			   this.queryAbnParams = JSON.parse(decodeURIComponent(options.data))
			   console.log('解析后的参数:', this.queryWoParams)
			 } else {
				 this.queryAbnParams = {}
			 }
		 		this.selectedIndexs = []
		 		this.loadAbnData(1)
				this.initFormData()
		 },
		methods: {
			initFormData() {
				if (this.queryAbnParams) {
					this.baseFormData.custCode = this.queryAbnParams.custPoMaterial
					this.baseFormData.productionQty = this.queryAbnParams.qty
					this.baseFormData.code = this.queryAbnParams.productCode
					this.baseFormData.name = this.queryAbnParams.productName
					this.baseFormData.drawingNo = this.queryAbnParams.drawingNo
					this.baseFormData.description = this.queryAbnParams.description
					this.baseFormData.productVer = this.queryAbnParams.productVer
					this.baseFormData.unitId_dictText = this.queryAbnParams.unitId_dictText
					this.baseFormData.productId = this.queryAbnParams.productId
					this.baseFormData.unitId = this.queryAbnParams.unitId
					this.baseFormData.attachment = this.queryAbnParams.attachment
					this.baseFormData.customerId = this.queryAbnParams.customerId
					this.baseFormData.salseOrderNumber = this.queryAbnParams.salseOrderNumber
					this.baseFormData.salseOrderItemId = this.queryAbnParams.salseOrderItemId
					this.setFocus()
				} else {				
						
				}				
			},
				
			productDrawShow() {
				this.drawerShow = true
				this.setFocusProduct()
			},
			getImage(record) {
				if (record.attachment) {
					return api.getFileAccessHttpUrl(record.attachment.split(',')[0])
				}
			},
			previewImage(e,record,index) {
				// 获取图片列表，这里只有一张图片，可以直接放大
				if (!record.attachment) return
				let images = record.attachment.split(',');
				let _images = []
				images.forEach((v)=>{
					_images.push( api.getFileAccessHttpUrl(v)	)
				})
				// 调用uni.previewImage方法进行预览
				uni.previewImage({
				  current: _images[0], // 当前显示图片的http链接
				  urls: _images // 需要预览的图片http链接列表
				});
			  },	
			openPop(text) {
				if (text) {
					this.popupMessages = text
				} else {
					this.popupMessages = ''
				}				
				this.$refs['popup'].open()
				// this.$refs.popup.open('center')
				
			},
			closePop() {
				this.$refs.popup.close()
			},
			getWorkOrderData(){
				let that = this
				if(!this.baseFormData.workOrderNumber){
					this.$tip.alert('工单号码不存在！');
					return false
				}
				let param={queryName:this.baseFormData.workOrderNumber}
				this.$http.get("/wom/womWorkOrder/list",{params:param}).then(res=>{
					let data = res.data.result.records
					console.log("res::workOrderNumber list>",data)
					if (data && data.length > 0){		
						if (data[0].status == 5) {
							this.$tip.toast('工单已取消，无法转序！')
							return
						}
						// if (data[0].status == 4) {
						// 	this.$tip.toast('工单暂停中请联系主管！')
						// 	return
						// }
						// if (data[0].status == 3) {
						// 	this.completeFlag = true
						// 	this.$tip.toast('工单已完成，不可转序！')
						// 	// return
						// }
						console.log(data[0])
						let product = data[0]
						this.baseFormData.custCode = product.custCode
						this.baseFormData.name = product.name
						this.baseFormData.code = product.code
						this.baseFormData.drawingNo = product.drawingNo
						this.baseFormData.description = product.description
						this.baseFormData.productVer = product.productVer
						this.baseFormData.unitId_dictText = product.unitId_dictText
						this.baseFormData.productId = product.productId		
					    this.baseFormData.unitId = product.unitId

						that.setFocus()
					} else {
						this.$tip.toast('未找到工单数据！')
					}
				})
			},	
			setFocus() {
				let that = this
				this.$nextTick(()=>{
					setTimeout(() => {
								that.focusState = true
						},1000)
				})
			
			},
			setFocusProduct() {
				let that = this
				this.$nextTick(()=>{
					setTimeout(() => {
								that.focusStateProduct = true
						},1000)
				})
			
			},
			scan(){
				let that = this
				// this.completeFlag = false
				this.focusState = false
				 console.log("进来了")
				// #ifndef H5
				uni.scanCode({
				    success: function (res) {
									  const innerAudioContext = uni.createInnerAudioContext();
												innerAudioContext.autoplay = true;
												innerAudioContext.src = 'https://www.suzi-info.com/13193.wav';  //音频地址
												innerAudioContext.onPlay(() => {
													console.log('开始播放');
												});
												innerAudioContext.onError((res) => {
												  console.log(res.errMsg);
												  console.log(res.errCode);
												});
						that.baseFormData.workOrderNumber = res.result.split('/')[0]
						that.baseFormData.workOrderQty = ''						
						that.getWorkOrderData();
				    }
				});
				// #endif
					// #ifdef H5
					this.$tip.alert("暂不支持")
					// #endif
			},
			changeProductPage(e){
				this.$refs.productTable.clearSelection()
				this.loadProductData(e.current)
			},
			changeSearchVal(val) {
				this.$refs.productTable.clearSelection()
				this.selectedIndexs = []
				this.loadProductData(1)
			},
			selectionChangeProduct(e){
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},			
			iconClick() {
				console.log("。。。。。")
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
			//取消
			cancel() {
				console.log('您点击了取消按钮')
				this.drawerShow = false;
			},
			//确定
			ensure() {
				console.log('您点击了确定按钮')
				if (this.selectedIndexs.length == 1) {
					this.drawerShow = false;
					console.log(this.productList[this.selectedIndexs[0]])
					let product = this.productList[this.selectedIndexs[0]]
					this.baseFormData.custCode = product.custCode
					this.baseFormData.name = product.name
					this.baseFormData.code = product.code
					this.baseFormData.drawingNo = product.drawingNo
					this.baseFormData.description = product.description
					this.baseFormData.productVer = product.productVer
					this.baseFormData.unitId_dictText = product.unitId_dictText
					this.baseFormData.productId = product.id
					this.baseFormData.unitId = product.unitId
					this.setFocus()
				} else {
					this.$tip.error("请选择一行数据！")
				}
			},
			initSelectOptions() {
				let that = this
				this.initDictData('bas_process,name,id,1=1 order by sort_no asc', (res) => {
					that.processList = res
				})
				this.initDictData("sys_depart,depart_name,id,1=1 and !(parent_id is null) and (parent_id != '')" , (res) => {
					that.deptList = res
				})
			},
			getCustomNumber() {
				let that = this
				this.$http.put(
					this.customNumberConfig.ruleUrl + this.customNumberConfig.ruleCode, {
						params: this.baseFormData
					}
				).then((res) => {
					// 执行成功，获取返回的值，并赋到页面上
					if (res.data && res.data.result) {
						that.$nextTick(() => {
							that.baseFormData.abnormalNumber = res.data.result;
						})
					}
				});
			},
			/**
			 * 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
			 * @param {String} name 字段名称
			 * @param {String} value 表单域的值
			 */
			// binddata(name,value){
			// 通过 input 事件设置表单指定 name 的值
			//   this.$refs.form.setValue(name, value)
			// },
			// 触发提交表单
			submit() {
				this.$refs.baseForm.validate().then(res => {
					console.log('表单数据信息：', this.baseFormData);
					if (this.uploadImgList.length>0) {
						this.baseFormData.attachment = this.uploadImgList.join()
					}					
					uni.setStorageSync('ABN_PRODUCE_SELECT_DEPARTMENT_ID', this.baseFormData.departId)
					uni.setStorageSync('ABN_PRODUCE_SELECT_PROCESS_ID', this.baseFormData.processId)
					this.$tip.loading();
					this.baseFormData.status = "1"
					this.$http.post(this.url.add,this.baseFormData).then(res=>{
						console.log(res)
						this.$tip.loaded();
						if (res.data.success){
							this.$tip.toast('提交成功')
							// this.$Router.replace({name:'index'})
							// uni.navigateBack({
							//         delta: 1
							//       });
						}					
					}).catch(()=>{
						this.$tip.loaded();
						this.$tip.error('提交失败')
					});
				}).catch(err => {
					this.setFocus()
					console.log('表单错误信息：', err);
				})
			},
			ChooseImage() {
				var that = this;
				// let tenant = uni.getStorageSync(SASS_TENANT_ID)
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: (res) => {						
						that.$http.upload(that.$config.apiUrl + that.uploadUrl + "?biz=" + this.biz, {
								filePath: res.tempFilePaths[0],
								name: 'file',
							})
							.then(res => {
								// that.baseFormData.avatar=res.data.message;
								that.uploadImgList.push(res.data.message)
								that.imgList.push(configService.staticDomainURL + "/" + res.data.message)
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						// this.imgList = res.tempFilePaths
						// that.imgList = that.imgList.concat(res.tempFilePaths);
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							this.uploadImgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			abnSelectionData() {
			},
			abnChangePage(e) {
				this.$refs.abnTable.clearSelection()
				// this.selectedIndexs.length = 0
				this.loadAbnData(e.current)
			},
			loadProductData(pageCurrent) {
				let that = this
				if (!this.url.productlist) {
					this.$tip.alert("请设置url.list属性!")
					return
				}
				this.productPageCurrent = pageCurrent
				this.loading = true;
				this.$http.get(this.url.productlist, {
					params: {
						pageNo: this.productPageCurrent,
						pageSize: this.productPageSize,
						queryName : this.searchVal,
					}
				}).then((res) => {
					if (res.data.success) {
						that.productList = res.data.result.records || res.data.result;
						if (res.data.result.total) {
							that.productTotal = res.data.result.total;
						} else {
							that.productTotal = 0;
						}
					} else {
						this.$tip.alert(res.message)
					}
			 }).finally(() => {
					that.loading = false
				})
			},
			loadAbnData(pageCurrent,value='') {
				let that = this
				if (!this.url.abnlist) {
					this.$tip.alert("请设置url.list属性!")
					return
				}
				this.abnPageCurrent = pageCurrent				
				let params = {
					'queryName' : value,
					'pageNo': this.abnPageCurrent,
					'pageSize': this.abnPageSize,
					'column': 'createTime,updateTime',					
					'order': 'desc',
				}				
				if (this.queryAbnParams && this.queryAbnParams.salseOrderNumber && this.queryAbnParams.productCode && this.queryAbnParams.customerId) {
				  params = {}
				  let superArr = []
				  superArr.push({ rule: 'eq', type: 'string', dictCode: '', val:this.queryAbnParams.salseOrderNumber , field: 'salseOrderNumber' })
				  superArr.push({ rule: 'eq', type: 'string', dictCode: '', val:this.queryAbnParams.productId , field: 'productId' })		
				  superArr.push({ rule: 'eq', type: 'string', dictCode: '', val:this.queryAbnParams.customerId , field: 'customerId' })		
				  params.superQueryParams = JSON.stringify(superArr)
				  params.superQueryMatchType = 'and'
				} else {
					return
				}
				
				this.loading = true;
				this.$http.get(this.url.abnlist, {
					params: params
				}).then((res) => {
					if (res.data.success) {
						that.abn.dataSource = res.data.result.records || res.data.result;
						console.log(that.abn.dataSource)
						if (res.data.result.total) {
							that.abnTotal = res.data.result.total;
						} else {
							that.abnTotal = 0;
						}
					} else {
						this.$tip.alert(res.message)
					}
			 }).finally(() => {
					that.loading = false
				})
			},
		}
	}
</script>

<style>
	.example-body {
		padding: 10px;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}
	.contentPop {
	  padding: 20px;
	   border-radius: 5px;
	  background-color: #fff;
	}
	.image {
	   width: 30px; /* 设置图片宽度 */
	   height: 20px; /* 设置图片高度 */
	 }	
	 .container-btn {
	   display: flex;
	   justify-content: center; /* 水平居中 */
	   align-items: center; /* 垂直居中 */
	   height: 100%; /* 父容器需要有确定的高度 */
	 }
</style>
